<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" v-model="newname"/>
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" v-model="newage" />
        </div>
        <div>
            <span>性别:</span>
            <select v-model="newgender">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
        <button @click="add" v-if="currentEditIndex === -1">添加/修改</button>
        <button @click="update" v-else>添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0">
                <tr v-show="list.length>0">
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                 <tr v-for="(item,index) in list" :key="item.name">
                    <td>{{index+1}}</td> 
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender}}</td>
                    <td>
                        <button @click="del(item.id)">删除</button>
                        <button @click="compile(item.id)">编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
              list:[
                { id: 1, name: 'Tom', age: 19, gender: '男' },
                { id: 2, name: 'Jone', age: 21, gender: '女' },
              ],
              newname:'',
              newage:'',
              newgender:'',
              currentEditIndex: -1, // 添加一个属性来跟踪当前编辑的项的索引
              isShow:false,
            },
            methods : {
                add(){
                  if(!this.newname.trim())return alert('添加的姓名不能为空')
                  if(!this.newage.trim()) return alert('添加的年龄不能为空')
                  if(this.newage<=0)return alert('填写的年龄有问题')
                    // 添加新项
                    this.list.push({
                        id: this.list[this.list.length - 1].id + 1,
                        name: this.newname,
                        age: this.newage,
                        gender: this.newgender,
                    });
                      this.newname = ''
                      this.newage  = ''
                      this.newgender = ''
                },
                   update() {
                    // 修改现有项
                    if (this.currentEditIndex !== -1) {
                        this.list[this.currentEditIndex].name = this.newname;
                        this.list[this.currentEditIndex].age = this.newage;
                        this.list[this.currentEditIndex].gender = this.newgender;
                        this.currentEditIndex = -1; // 重置编辑状态

                        // 重置输入框
                        this.newname = '';
                        this.newage = '';
                        this.newgender = '';
                    }
                },
                del(id){
                  this.list=this.list.filter(item=>item.id !==id)
                },
                compile(id) {
                    // 找到要编辑的项的索引
                    const index = this.list.findIndex(item => item.id === id);
                    if (index !== -1) {
                        // 将该项的数据赋值给输入框绑定的数据属性
                        this.newname = this.list[index].name;
                        this.newage = this.list[index].age;
                        this.newgender = this.list[index].gender;
                        this.currentEditIndex = index; // 设置当前编辑的项的索引
                    }
                    this.isShow=true
                },
            }
        })
    </script>
</body>

</html>